﻿@charset "utf-8";
/*主题色*/
@blue_dark: #094E74;
@blue_light: #007DC2;

html{
	position: relative;
	width: 100%;
	height: 100%;
}
body{
	background: @blue_light url(../images/backbg.png) center no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100%;
	font-family: "PingFangSC-Regular", "微软雅黑", Arial, Tahoma, sans-serif;
}
@font-face{
	font-family: UnidreamLED;
	src: url('../fonts/UnidreamLED.ttf'),
}
.hidden{
	visibility: hidden;
}
.none{
	display: none;
}
.login{
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	padding-top: 20vh;
	.login-title{
		width: 808px;
		height: 90px;
		margin: 0 auto;
	}
	.login-input{
		width: 248px;
		margin: 10vh auto 0;
		.am-selected{
			margin-bottom: 10px;
			.am-btn-sm{
				font-size: 1.6rem;
			}
		}
		.am-form{
			.am-form-group{
				margin-bottom: 10px;
			}
		}
		.alert{
			margin-top: 10px;
			text-align: center;
			color: #fff;
			font-size: 14px;
		}
	}
}
.nav{
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,0);transform: translate(-50%,0);
	width: 826px;
	& > ul{
		list-style: none;
		display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;
		margin: 0;
		padding: 0;
		li{
			text-align: center;
			-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;
			& + li{
				margin-left: 10px;
			}
			a{
				display: block;
				color: #fff;
				border: 2px solid #fff;
				padding: 20px 0 10px;
				font-size: 18px;
				line-height: 32px;
                position:relative;
				-webkit-transition: all 0.2s;transition: all 0.2s;
				p{
					margin: 0;
				}
			}
		}
		& + ul{
			margin-top: 10px;
		}
		& > li{
			-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;
            &:last-child{
                flex: 2;
            }
			& > ul{
				list-style: none;
				display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;
				margin: 0;
				padding: 0;
				& > li{
					-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;
				}
			}
		}
	}
}


header {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF),to(#E3E3E3));
    background: linear-gradient(to bottom, #FFF 0%,#E3E3E3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#E3E3E3',GradientType=0 );
    -webkit-box-shadow: 0 3px 0 #005A8B;
    box-shadow: 0 3px 0 #005A8B;

    .head {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        .title {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            height: 90px;
            padding-left: 18px;

            img {
                display: block;
                -webkit-box-flex: 0;
                -webkit-flex: none;
                -moz-box-flex: 0;
                -ms-flex: none;
                flex: none;
                width: 60px;
                height: 58px;
                margin-right: 10px;
            }

            h1 {
                margin: 0;
                line-height: 20px;
                padding-top: 2px;
                color: @blue_dark;

                p {
                    margin: 0;
                    font-size: 24px;
                    line-height: 20px;
                }

                span {
                    font-size: 16px;
                }
            }
        }

        .control {
            ul {
                list-style: none;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                margin: 0;
                padding: 0;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                height: 90px;
                padding-right: 18px;

                li {
                    & + li {
                        margin-left: 30px;
                    }

                    a {
                        display: block;
                        width: 60px;
                        height: 48px;
                        padding: 0;
                        border-radius: 50%;
                        border: 2px solid #fff;

                        img {
                            display: block;
                            margin: 6px auto;
                            width: 32px;
                            height: 32px;
                        }

                        &[data-fun="1"] {
                            background: -webkit-gradient(linear, left top, left bottom, from(#7EDBED),to(#48B5D6));
                            background: linear-gradient(to bottom, #7EDBED 0%,#48B5D6 100%);
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7EDBED', endColorstr='#48B5D6',GradientType=0 );
                        }

                        &[data-fun="2"] {
                            background: -webkit-gradient(linear, left top, left bottom, from(#F0B13E),to(#DD971D));
                            background: linear-gradient(to bottom, #F0B13E 0%,#DD971D 100%);
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0B13E', endColorstr='#DD971D',GradientType=0 );
                        }

                        &[data-fun="3"] {
                            background: -webkit-gradient(linear, left top, left bottom, from(#EE7C7C),to(#D94646));
                            background: linear-gradient(to bottom, #EE7C7C 0%,#D94646 100%);
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EE7C7C', endColorstr='#D94646',GradientType=0 );
                        }

                        &[data-fun="4"] {
                            background: -webkit-gradient(linear, left top, left bottom, from(#68C452),to(#59AA45));
                            background: linear-gradient(to bottom, #68C452 0%,#59AA45 100%);
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68C452', endColorstr='#59AA45',GradientType=0 );
                        }
                    }

                    p {
                        margin: 0;
                        text-align: center;
                        font-size: 12px;
                        color: #2F2F2F;
                    }
                }
            }
        }
    }

    .username {
        position: absolute;
        z-index: 3;
        top: 70px;
        left: 88px;
        padding-right: 20px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        color: #dc7513;
    }
}
.fun_bd{
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 90px;
	.process{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 62px;
		.ranger{
			&.ranger_2{
				width: 404px;
				height: 62px;
				background: url(../images/Combined_s.png) center no-repeat;
				background-size: cover;
			}
			&.ranger_3{
				width: 380px;
				height: 46px;
				background: url(../images/Combined_m.png) center no-repeat;
				background-size: cover;
			}
			&.ranger_4{
				width: 734px;
				height: 62px;
				background: url(../images/Combined.png) center no-repeat;
				background-size: cover;
			}
			&.ranger_5{
				width: 818px;
				height: 62px;
				background: url(../images/Combined_L.png) center no-repeat;
				background-size: cover;
			}
            &.ranger_6{
				width: 610px;
				height: 62px;
				background: url(../images/Combined_6.png) center no-repeat;
				background-size: cover;
			}
			position: relative;
			margin: 0 auto;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			ul{
				position: relative;
				z-index: 2;
				list-style: none;
				margin: 0;
				padding: 0 6px;
				display: -webkit-box;
				display: -webkit-flex;
				display: -moz-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-webkit-justify-content: space-between;
				   -moz-box-pack: justify;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
				-webkit-box-align: center;
				-webkit-align-items: center;
				   -moz-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				   -moz-box-flex: 1;
				    -ms-flex: 1;
				        flex: 1;
				li{
					position: relative;
					width: 36px;
					height: 36px;
					border-radius: 50%;
					-webkit-box-flex: 0;
					-webkit-flex: none;
					   -moz-box-flex: 0;
					    -ms-flex: none;
					        flex: none;
					background-color: #3EA2D9;
					text-align: center;
					line-height: 36px;
					font-weight: 600;
					font-size: 30px;
					color: @blue_light;
					&.done{
						background-color: #fff;
						p{
							color: #fff;
						}
					}
					&.active{
						background-color: #FFCE26;
						-webkit-animation: shing .5s ease infinite alternate;
						        animation: shing .5s ease infinite alternate;
						p{
							color: #FFCE26;
						}
					}
					p{
						width: 140px;
						margin: 10px 0 0;
						left: 50%;
						-webkit-transform: translate(-50%,0);
						        transform: translate(-50%,0);
						position: absolute;
						font-size: 20px;
						line-height: 32px;
						color: #3EA2D9;
						span{
							position: absolute;
							bottom: -34px;
                            white-space: nowrap; 
							left: 50%;
							-webkit-transform: translate(-50%,0);
							        transform: translate(-50%,0);
							display: block;
							padding: 0 6px;
							border-radius: 4px;
							background-color: #FFCE26;
							text-align: center;
							color: @blue_light;
							font-weight: 400;
							&::after{
								content: '';
								position: absolute;
								top: -6px;
								left: 50%;
								-webkit-transform: translate(-50%,0);
								        transform: translate(-50%,0);
								display: block;
								width: 0;
								height: 0;
								border-style: solid;
								border-color: transparent transparent #FFCE26 transparent;
								border-width: 0 6px 6px;
							}
						}
					}
				}
			}
			.progress{
				position: absolute;
				z-index: 1;
				top: 31px;
				left: 50%;
				-webkit-transform: translate(-50%,-2px);
				        transform: translate(-50%,-2px);
				height: 5px;
				&.progress_2{
					width: 342px;
				}
				&.progress_3{
					width: 448px;
				}
				&.progress_4{
					width: 672px;
				}
				&.progress_5{
					width: 755px;
				}
                &.progress_6{
					width: 838px;
				}
				.slide{
					height: 100%;
					background-color: #fff;
				}
			}
		}
		.info{
			margin-top: 210px;
			.cont{
				height: 94px;
				background-color: fade(#000,30);
				border-radius: 4px;
				font-size: 30px;
				color: #fff;
				text-align: center;
				line-height: 94px;
				span{
					position: relative;
					width: auto;
					display: inline-block;
					margin: 0 auto;
					ul{
						position: absolute;
						right: -60px;
						bottom: 34px;
						margin: 0;
						padding: 0;
						list-style: none;
						li{
							float: left;
							width: 8px;
							height: 8px;
							-webkit-animation: wait .5s ease infinite alternate;
							        animation: wait .5s ease infinite alternate;
							&:nth-child(2){
								margin-left: 10px;
								-webkit-animation: wait .5s ease .2s infinite alternate;
								        animation: wait .5s ease .2s infinite alternate;
							}
							&:nth-child(3){
								margin-left: 10px;
								-webkit-animation: wait .5s ease .4s infinite alternate;
								        animation: wait .5s ease .4s infinite alternate;
							}
						}
					}
				}
			}
			.list{
				position: relative;
				width: 600px;
				margin: 0 auto;
				padding: 10px;
				height: 284px;
				background-color: fade(#000,30);
				border-radius: 4px;
				color: #fff;
				h3{
					position: absolute;
					top: -24px;
					left: 10px;
					margin: 0;
					font-size: 20px;
					line-height: 24px;
				}
				.items{
					width: 100%;
					height: 100%;
					overflow-x: hidden;
					overflow-y: auto;
					.am-alert{
						margin: 0;
					}
				}
			}
		}
		.reset{
			text-align: center;
			a{
				padding: 0;
				width: 180px;
				height: 64px;
				margin: 72px auto 0;
				border-radius: 4px;
				background-color: #fff;
				font-size: 24px;
				line-height: 64px;
				color: #000;
			}
		}
		.submit{
			position: absolute;
			left: 0;
			width: 100%;
			text-align: center;
			a{
				padding: 0;
				width: 160px;
				height: 48px;
				margin: 100px auto 0;
				border-radius: 4px;
				background-color: #4BAF33;
				font-size: 16px;
				line-height: 48px;
				color: #fff;
			}
		}
	}
	.temperature{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 84px;
		.display{
			width: 400px;
			height: 200px;
			border: 2px solid #000;
			margin: 0 auto;
		}
		.info{
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			   -moz-box-pack: justify;
			    -ms-flex-pack: justify;
			        justify-content: space-between;
			margin-top: 60px;
			.table{
				-webkit-box-flex: 0;
				-webkit-flex: none;
				   -moz-box-flex: 0;
				    -ms-flex: none;
				        flex: none;
				width: 400px;
				height: 242px;
				border: 2px solid #000;
				overflow: hidden;
				.hd{
					height: 50px;
					padding: 0 12px;
					background: -webkit-gradient(linear,  left top, left bottom,  from(#FFF),to(#E3E3E3));
					background: linear-gradient(to bottom,  #FFF 0%,#E3E3E3 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#E3E3E3',GradientType=0 );
					-webkit-box-shadow: 0 1px 0 #9B9B9B;
					        box-shadow: 0 1px 0 #9B9B9B;
					line-height: 50px;
					font-size: 20px;
					font-weight: 600;
					color: @blue_dark;
				}
				.bd{
					width: 100%;
					height: 100%;
					background-color: #fff;
					padding-bottom: 50px;
					overflow-x: hidden;
					overflow-y: auto;
					ul{
						list-style: none;
						margin: 0;
						padding: 0;
						li{
							display: -webkit-box;
							display: -webkit-flex;
							display: -moz-box;
							display: -ms-flexbox;
							display: flex;
							-webkit-box-pack: justify;
							-webkit-justify-content: space-between;
							   -moz-box-pack: justify;
							    -ms-flex-pack: justify;
							        justify-content: space-between;
							padding: 0 10px;
							height: 32px;
							font-size: 14px;
							line-height: 32px;
							&:nth-child(1){
								color: #4BAF33;
							}
							&:nth-child(2n){
								background-color: #F8F8F8;
							}
							&[data-num="0"]{
								background-color: #FFE3E3;
								color: #E35F5F;
							}
						}
					}
				}
			}
		}
	}
	.package-control{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 26px 24px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		   -moz-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		.list{
			-webkit-box-flex: 0;
			-webkit-flex: none;
			   -moz-box-flex: 0;
			    -ms-flex: none;
			        flex: none;
			width: 670px;
			background-color: fade(#004368, 50);
			border: 1px solid fade(#fff,50);
			padding: 10px;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			   -moz-box-pack: justify;
			    -ms-flex-pack: justify;
			        justify-content: space-between;
			-webkit-align-content: flex-start;
			    -ms-flex-line-pack: start;
			        align-content: flex-start;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-webkit-flex-flow: row wrap;
			   -moz-box-orient: horizontal;
			   -moz-box-direction: normal;
			    -ms-flex-flow: row wrap;
			        flex-flow: row wrap;
			a{
				-webkit-box-flex: 0;
				-webkit-flex: none;
				   -moz-box-flex: 0;
				    -ms-flex: none;
				        flex: none;
				width: 100px;
				height: 64px;
				border-radius: 4px;
				display: -webkit-box;
				display: -webkit-flex;
				display: -moz-box;
				display: -ms-flexbox;
				display: flex;
				padding: 0 4px;
				background-color: #fff;
				margin-bottom: 10px;
				text-align: center;
				white-space: normal;
				span{
					-webkit-box-flex: 1;
					-webkit-flex: auto;
					   -moz-box-flex: 1;
					    -ms-flex: auto;
					        flex: auto;
					display: block;
					width: 100px;
					margin: auto;
					color: @blue_dark;
				}
				&:active{
					background-color: #FFCE26;
                    background-image: -webkit-linear-gradient(top,#ffce26 0%,#fbea17 100%);
                    background-image: linear-gradient(top,#ffce26 0%,#fbea17 100%);
                    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#8DC03C', StartColorStr='#69902a');
                border: 1px solid #eaab07;
				}
			}
			.lastNum{
				width: 100px;
			}
		}
		.function{
			flex: none;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			.display{
				/*width: 288px;
				height: 355px;
				background-color: fade(#000,50);
				padding: 5px;
				display: flex;
				flex-flow: column;
				justify-content: space-between;*/
                width: 288px;
                height: 370px;
                background-color: rgba(0, 0, 0, 0.5);
                padding: 5px;
                display: flex;
                flex-flow: column;
                /*justify-content: space-between;*/
				.led{
					/*position: relative;
					height: 110px;
					background-color: #74BCC3;
					box-shadow: inset 0 0 4px 2px rgba(0,0,0,.4);
					padding: 0 6px;
					font-family: UnidreamLED;
					font-size: 64px;
					line-height: 110px;
					text-align: right;*/
                    position: relative;
                    height: 130px;
                    background-color: #74BCC3;
                    box-shadow: inset 0 0 4px 2px rgba(0, 0, 0, 0.4);
                    padding: 0 6px;
                    font-family: UnidreamLED;
                    font-size: 70px;
                    line-height: 130px;
                    text-align: right;
					p{
						margin: 0;
					}
					.error{
						position: absolute;
						bottom: 6px;
						right: 6px;
						font-size: 16px;
						line-height: 20px;
					}
				}
				.record{
					ul{
						list-style: none;
						margin: 0;
						padding: 0;
						li{
							display: flex;
							justify-content: space-between;
							padding: 0 10px;
							font-size: 16px;
							line-height: 30px;
							& + li{
								margin-top: 10px;
							}
							label{
								margin: 0;
								color: #6CB05B;
							}
							input{
								background-color: rgba(255,255,255,0);
								border: none;
								text-align: right;
								color: #fff;
								font-size: 18px;
							}
						}
					}
				}
				.info{
					height: 32px;
					background-color: #E04141;
					color: #fff;
					font-size: 20px;
					text-align: center;
					line-height: 32px;
				}
			}
			.submit{
				a{
					padding: 0;
					width: 288px;
					height: 174px;
					border-radius: 4px;
					background-color: #4BAF33;
					font-size: 36px;
					line-height: 174px;
					color: #fff;
				}
			}
			.reset{
				a{
					padding: 0;
					width: 288px;
					height: 64px;
					border-radius: 4px;
					background-color: #fff;
					font-size: 24px;
					line-height: 64px;
					color: #000;
				}
			}
		}
	}
	.print-list{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 26px 24px;
		.table{
			position: relative;
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: fade(#004368, 50);
			table{
				position: relative;
				width: 100%;
				th{
					height: 60px;
					background: -webkit-gradient(linear,  left top, left bottom,  from(#FFF),to(#E3E3E3));
					background: linear-gradient(to bottom,  #FFF 0%,#E3E3E3 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#E3E3E3',GradientType=0 );
					text-align: center;
					font-size: 20px;
					color: @blue_dark;
					vertical-align: middle;
				}
				td{
					height: 60px;
					vertical-align: middle;
					a{
						background-color: #4BAF33;
						border: 1px solid #2E791C;
						border-radius: 4px;
						color: #fff;
						img{
							margin-left: 4px;
						}
					}
				}
				tbody{
					tr{
						background-color: #fff;
					}
				}
			}
		}
	}
}
@keyframes shing{
	from {
		-webkit-box-shadow: 0 0 10px 4px #FFAC26;box-shadow: 0 0 10px 4px #FFAC26;
		background-color: #FFAC26;
	}
	to {
		-webkit-box-shadow: 0 0 0 0 #FFCE26;box-shadow: 0 0 0 0 #FFCE26;
		background-color: #FFCE26;
	}
}
@-webkit-keyframes shing{
	from {
		-webkit-box-shadow: 0 0 10px 4px #FFAC26;box-shadow: 0 0 10px 4px #FFAC26;
		background-color: #FFAC26;
	}
	to {
		-webkit-box-shadow: 0 0 0 0 #FFCE26;box-shadow: 0 0 0 0 #FFCE26;
		background-color: #FFCE26;
	}
}
@keyframes wait{
	from {background-color: rgba(255,255,255,1)}
	to {background-color: rgba(255,255,255,.1)}
}
@-webkit-keyframes wait{
	from {background-color: rgba(255,255,255,1)}
	to {background-color: rgba(255,255,255,.1)}
}
.red{
   color:#dd514c !important;
}
.tip-green{
    background-color:#5eb95e !important; 
    height: 32px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 32px;
}